<template>
  <view class="container">
    <view class="order-list">
      <card v-for="item in orders" :key="item.orderId" @clickHandle="toDetailHandle(item.orderId)">
        <template v-slot:header>
          <view class="title">{{ item.shopName }}</view>
        </template>
        <view class="item">
          <view class="mark">店铺地址: </view>
          <view class="value">{{ item.address }}</view>
        </view>

        <view class="item">
          <view class="mark">所需价格: </view>
          <view class="value">{{ item.price }}元</view>
        </view>
        <view class="item">
          <view class="mark">下单时间: </view>
          <view class="value">{{ item.createTime }}</view>
        </view>
        <view class="item">
          <view class="mark">订单完成时间: </view>
          <view class="value">{{ item.completeTime }}</view>
        </view>
        <view class="footer row" style="padding: 18rpx 32rpx">
          <view class="row">
            <view class="have_color">运行程序</view>
            <view class="text">{{ computedProgram(item.program) }}</view>
          </view>
          <view class="row">
            <view class="have_color">订单状态</view>
            <view class="text">{{ computedStatus(item.status) }}</view>
          </view>
        </view>
      </card>
    </view>
		<view class="tip">{{tip}}</view>
  </view>
</template>

<script>
import Card from "@/components/Card";
import { getOrders } from "@/api/Home/index";
import {getProgram,getStatus} from "@/utils/utils";

import { mapGetters } from "vuex";
export default {
  data() {
    return {
      orders: [],
      page: 1,
      limit: 5,
      hasNextPage: false,
			tip:''
    };
  },
  components: {
    card: Card,
  },
  onLoad() {
		this.orders = [];
    this.getOrderList();
  },
  computed: {
    ...mapGetters(["openId"]),
  },
  methods: {
    toDetailHandle(id) {
      uni.navigateTo({
        url: `../OrderDetail/index?id=${id}`,
      });
    },
    getOrderList() {
      getOrders(this.openId, this.page, this.limit)
        .then((result) => {
          const { hasNextPage, data } = result;
					this.orders = this.orders.concat(data);
          this.hasNextPage = hasNextPage;
					uni.stopPullDownRefresh();
        })
        .catch((err) => {
          this.orders = [];
          this.hasNextPage = false;
          uni.stopPullDownRefresh();
        });
    },
    computedProgram(value) {
      return getProgram(value);
    },
    computedStatus(value) {
      return getStatus(value);
    },
  },
  onPullDownRefresh() {
    this.orders = [];
    this.page = 1;
		this.limit = 5;
		this.getOrderList();
  },
	onReachBottom(){
		if(!this.hasNextPage){
			this.tip = '到底了!'
			return;
		}
    this.page +=1;
		this.getOrderList();
	}
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #f6f6f6;
  padding: 20rpx;
  .order-list {
    .value {
      color: #0f0f0f;
    }
    .item {
      display: flex;
      justify-content: flex-start;
      padding: 10rpx 32rpx;
      .mark {
        color: #8f8f8f;
      }
    }
    .row {
      display: flex;
      justify-content: space-between;
    }
    .have_color {
      background-color: #234f9e;
      color: #fff;
      padding: 12rpx 12rpx;
      border-radius: 10rpx;
    }
    .text {
      margin-left: 8rpx;
      padding: 12rpx 0;
      color: #0f0f0f;
    }
  }
	.tip{
		text-align: center;
		font-size: 32rpx;
    color: #8f8f8f;
	}
}
</style>
